<template>
   <div class="ItemsAdd">
    <el-form :rules="rules" :model="item" label-width="120px" ref="itemAdd">
      <el-form-item label="商品名称" prop="itemName">
        <el-input v-model="item.itemName" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input-Number v-model="item.price" :min="0"/>
      </el-form-item>
      <el-form-item label="所属分类" prop="cateId">
        <el-cascader v-model="item.cateId" :options="cates" :props="cascaderProps" clearable />
      </el-form-item>
      <el-form-item label="上下架" prop="onsale">
        <el-switch
            v-model="item.onsale"
            inline-prompt
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            active-text="上架"
            inactive-text="下架"
          />
      </el-form-item>
      <el-form-item label="商品封面">
        <el-upload
          action = '/api/upload'
          name="file"
          accept=".jpg, .png, .gif"
          :on-success="uploadSuccess"
          :before-upload="beforeupload"
        >
        <img src="../../assets/imgs/pic.png" alt="">
       </el-upload>
       <el-image  style="width: 100px" :src="item.thumb" :preview-src-list="[item.thumb]"/>
      </el-form-item>
      <el-form-item label="商品描述" prop="desc">
        <el-input type="textarea" v-model="item.desc" />
      </el-form-item>
      <el-form-item label="商品详情">
        <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            mode="default"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="item.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
      </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="restes">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchCates } from '@/api/cateLists'
import { addItem } from '@/api/itemLists'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'ItemAdd',
  data () {
    return {
      rules: {
        itemName: [
          {
            required: true,
            tragger: 'blur',
            message: '分类名必填'
          }
        ],
        price: [
          {
            required: true
          }
        ],
        // cateId: [
        //   {
        //     required: true,
        //     tragger: 'blur',
        //     message: '分类必选'
        //   }
        // ]
      },
      item: {
        itemName: '',
        price: 0,
        onsale: true,
        desc: '',
        thumb: '',
        cateId: -1,
        content: ''
      },
      cates: [],
      cascaderProps: {
        emitPath: false,
        checkStrictly: true,
        value: 'id',
        label: 'cateName'
      },
      // 富文本相关配置
      editor: null,
      // 富文本工具栏配置
      toolbarConfig: {
      },
      // 富文本主题配置
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server: '/api/upload',
            fieldName: 'file',
            customInsert: (url, insertFn) => {
              insertFn(url.data.url)
            }
          }
        }
      }
    }
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor)
    },
    beforeupload (file) {
      if (file.size > 50 * 1024) {
        this.$message({
          type: 'error',
          message: '图片体积不能超出'
        })
        return false
      } else {
        return true
      }
    },
    uploadSuccess (res) {
      // 图片上传成功回调
      if (res.code === 200) {
        this.item.thumb = res.data.url
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      }
    },
    onSubmit () {
      this.$refs.itemAdd.validate().then(() => {
        addItem(this.item).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              duration: 1000,
              message: res.data.msg,
              onClose: () => {
                this.$router.replace('/itemLists')
              }
            })
          }
        })
      }).catch(() => {
        alert('提交失败')
      })
    },
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 200) {
          this.cates = res.data.data.lists
        }
      })
    },
    restes () {
      this.$refs.itemAdd.resetFields()
    }
  },
  created () {
    this.fetchCates()
  },
  components: {
    Editor,
    Toolbar
  }
}
</script>

<style lang="scss" scoped>
.ItemsAdd{
  max-width: 1000px;
}
</style>
